<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue2 中 sync 修饰符的使用
        :age.sync="myAge"
          展开形式
            :age="myAge"    @update:age="myAge = $event"
        :name.sync="xxx"
          展开形式
            :name="xxx"     @update:name="xxx = $event"

     -->

    <div id="app">
      <hello :name="myName" :age.sync="myAge"></hello>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      Vue.component("hello", {
        template: `
          <div>
            <h2>Hello, {{ name }} - {{ age }}</h2> 
            <button @click="$emit('update:age', age + 1)">age++</button>
            <button @click="$emit('update:age', age - 1)">age--</button>
          </div>
        `,
        props: ["name", "age"],
      });

      const vm = new Vue({
        el: "#app",
        data: {
          myName: "张三",
          myAge: 18,
        },
      });
    </script>
  </body>
</html>
